<template>
  <van-nav-bar title="上传身份证" fixed placeholder left-arrow @click-left="onBack"> </van-nav-bar>
  <div class="cardPage">
    <div class="title">请上传身份证的正反面</div>
    <van-uploader max-count="1" :reupload="true" :after-read="handleFrontUpload">
      <div class="uploadBox">
        <div class="info">
          <div class="title">头像面</div>
          <div class="tip">上传您的身份证头像面</div>
        </div>
        <div class="img">
          <img v-if="frontUrl" :src="frontUrl" alt="" />
          <img v-else src="~@/assets/img/card1.jpg" alt="" />
        </div>
      </div>
    </van-uploader>
    <van-uploader max-count="1" :reupload="true" :after-read="handleBackUpload">
      <div class="uploadBox">
        <div class="info">
          <div class="title">国徽面</div>
          <div class="tip">上传您的身份证国徽面</div>
        </div>
        <div class="img">
          <img v-if="backUrl" :src="backUrl" alt="" />
          <img v-else src="~@/assets/img/card2.jpg" alt="" />
        </div>
      </div>
    </van-uploader>

    <div class="submitBox">
      <van-button type="primary" size="large" :disabled="!checked" @click="submit">确认</van-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onActivated, ref } from 'vue'
import { getQiniuToken, uploadFile, cardRecognition } from '@/api/realName'
import { showToast, showLoadingToast, closeToast } from 'vant'
import 'vant/es/toast/style/index'
import { useRouter, useRoute } from 'vue-router'
import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()

const userInfo = appStore.getUserInfo
onActivated(() => {
  userInfo.value = appStore.getUserInfo
})
const { push, back } = useRouter()
const route = useRoute()
const documentId = route.query.documentId as string
const frontUrl = ref('')
const frontInfo = ref<any>({})
const backInfo = ref<any>({})
// showLoadingToast({
//   message: '上传中',
//   duration: 0
// })
const token = ref()
const getUploadToken = async () => {
  let res = await getQiniuToken()
  console.log(res)
  token.value = res.message
}
getUploadToken()
const onBack = () => {
  back()
}
const handleFrontUpload = (file: any) => {
  console.log(file)
  showLoadingToast({
    message: '上传中',
    duration: 0
  })

  handleUploadFile(file.file, 'front')
}

const backUrl = ref('')
const handleBackUpload = (file: any) => {
  showLoadingToast({
    message: '上传中',
    duration: 0
  })
  handleUploadFile(file.file, 'back')
}
const checked = ref(false)
const imgUrl = 'http://etc.img.xingchuangke.net/'
const handleUploadFile = (file: any, type: string) => {
  let filename = file.name
  let fileType = filename.split('.').pop()
  uploadFile({
    token: token.value,
    file: file,
    key:
      'base/' +
      userInfo.name +
      (type == 'front' ? '身份证正面' : '身份证反面') +
      new Date().getTime() +
      '.' +
      fileType
  }).then((res) => {
    let url = imgUrl + res.key
    if (type == 'front') {
      cardRecognition({
        imgUrl: url,
        type,
        userId: userInfo.id
      }).then((res: any) => {
        closeToast()
        if (res.statusCode == 200) {
          checked.value = true
        } else {
          showToast(res.message)
        }
      })
      frontUrl.value = url
    } else {
      backUrl.value = url
      cardRecognition({
        imgUrl: url,
        type,
        userId: userInfo.id
      }).then((res: any) => {
        closeToast()
      })
    }
  })
}

const submit = () => {
  // 提交
  if (!frontUrl.value) {
    showToast({
      message: '请上传头像面',
      duration: 1500
    })
    return
  }
  if (!backUrl.value) {
    showToast({
      message: '请上传国徽面',
      duration: 1500
    })
    return
  }
  if (!checked.value) {
    showToast({
      message: '身份证识别失败，请重新上传人像面',
      duration: 1500
    })
    return
  }
  push({
    name: 'faceDetect'
  })
}
</script>
<style scoped lang="less">
.cardPage {
  padding: 16px;
}
.title {
  font-size: 18px;
  font-weight: bold;
  padding: 12px 0;
}
.uploadBox {
  display: flex;
  padding: 16px;
  background: #f7f8fa;
  margin-bottom: 16px;
  border-radius: 4px;
  height: 150px;
  width: 100%;
  .info {
    width: 45%;
    .title {
      padding: 4px 0;
    }
    .tip {
      font-size: 12px;
      color: #999;
      word-break: keep-all;
      padding-right: 16px;
    }
  }
  .img {
    font-size: 0;
    width: 55%;
    img {
      width: 100%;
    }
  }
}
.submitBox {
  padding: 16px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
